<template>
    <div class="bread">
        <div class="container">
            <ul>
                <li style="margin-right: 11px;">当前位置</li>
                <li v-for="(breadcrumb, index) in breadcrumbs" :key="index">
                    <nuxt-link :to="breadcrumb.to"
                        :style="{ color: $route.path == breadcrumb.to.path ? '#080808' : '' }">/<span
                            style="margin: 0 11px;">{{
                                breadcrumb.text }}</span></nuxt-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    computed: {
        breadcrumbs() {
            const breadcrumbs = []
            const routes = this.$route.matched
            routes.forEach((route, index) => {
                const breadcrumb = {
                    text: route.name,
                    to: { path: route.path || '/' }
                }
                breadcrumbs.push(breadcrumb)
            });
            return breadcrumbs
        }
    }
}
</script>
<style scoped>
.bread {
    height: 60px;
    line-height: 60px;
    background: #f5f5f5;
}

ul {
    display: flex;
}

ul li {
    font-size: 12px;
    color: #B4B4B4;
}

ul li a {
    color: #B4B4B4;
}
</style>
  